<template>
  <div class="loginPage">
    <div class="topImg">
	    <van-image width="100%" :src="topImgUrl"/>
	  </div>
    <div class="loginMsg">
      <van-cell readonly value="用户登录" value-class="loginTitle" size="large"></van-cell>
      <van-field size="large" placeholder="请输入用户名" left-icon="user-o" v-model='username'/>
      <van-field size="large" type="password" placeholder="请输入密码" left-icon="closed-eye" v-model="password" :error-message="errorMessage"/>
      <div>
        <van-button class="login-button" size="normal" type="info" @click="loginBtn" :text="loginBtnText"></van-button>
        <div class="reset-div"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return{
			topImgUrl: require('../../public/img/login-top.png'),
      errorMessage: '',
      username: '',
      password: '',
      openid: '',
			titleValue: '用户登录',
			loginBtnText: '登　录',
    }
  },
  methods:{
		loginBtn() {
      if(this.username.isEmpt() || this.password.isEmpt()){
				this.errorMessage = '用户名、密码不能为空';
        return ;
      } else {
			  this.errorMessage = '';
      }
			//登录
      let query = {
        openid: this.openid,
        userName: this.username,
        password: this.password
      };
      this.$axios.post('/api/login/username', query).then(res => {
        let userInfo = res || { token: '' };
        this.loginFunc(userInfo);
      });
    },
    openidLogin(code) {
      this.$store.commit('loading', true);
      this.$axios.get('/api/login/wxWebOpenId', { 
        code 
      }).then(res => {
        this.$store.commit('loading');
        if (res && res.openid) {
          this.openid = res.openid;
          this.$axios.post('/api/login/username', { 
            openid: res.openid 
          }).then(user => {
            let userInfo = user || { token: '' };
            if (userInfo.openid != this.openid) userInfo.openid = this.openid;
            this.loginFunc(userInfo);
          });
        }
      });
    },
    loginFunc(userInfo) {
      this.$store.commit('setUserInfo', userInfo);
      this.$router.push('Census');
    }
  },
	mounted(){
    let code = window.location.search.search('code');
    if (code) this.openidLogin(code);
		if (localStorage.getItem('username')) {
			this.username = localStorage.getItem('username');
		}
		if (process.env.NODE_ENV === 'development') {
      this.username = '牛伟';
      this.password = 'dxt000111';
		}
	}
}
</script>
<style scoped>
.loginPage {
	height: 100%;
	text-align: center;
}

.loginMsg{
  width: 90%;
  border: 1px solid #eee;
  margin: 0 auto;
  padding-top: 10px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 0 10px #eee;
  position: relative;
  top: -8px;
  /* left: 5px; */
  border-radius: 10px;
	box-shadow: 0px 5px 5px rgba(102,102,102,0.35);
}

.login-div{
	text-align: center;	
	
}

.loginTitle{
	text-align: center;	
	font-size: 14px;
	color:#1565A7;
}
	

.login-button{
  font-size: 14px;
  box-shadow: 0px 5px 5px rgba(102,102,102,0.35);
  width:50%;
  margin-top:30px;
}

.reset-div{
	 margin-top:20px;
	 margin-bottom:40px;
}

.fixButton {
  display: inline-block;
  width: 80px;
}

/deep/.van-button{
 box-shadow: 0px 5px 5px rgba(102,102,102,0.35);
  
}

</style>